<template>
    <div class="res-body" v-show="stateLoad">
        <div class="loading-3"><i></i><i></i><i></i><i></i><i></i></div>
    </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'listload',
    props: {
      stateLoad: {
        type: Boolean
      }
    },
    created() {
    },
    methods: {}
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "../../../assets/stylus/main.styl";
    .res-body {
        height: 2vw;
        text-align: center;
    }
    @-webkit-keyframes loading-3 {
        0% {
            left: 45px;
            top: 0;
        }
        80% {
            left: 0;
            top: 0;
        }
        85% {
            left: 0;
            top: -10px;
            width: 6px;
            height: 6px;
        }
        90% {
            width: 6px;
            height: 6px;
        }
        95% {
            left: 45px;
            top: -10px;
            width: 6px;
            height: 6px;
        }
        100% {
            left: 45px;
            top: 0;
        }
    }

    .loading-3 {
        width: 40px;
        height: 20px;
        margin: 4vw auto;
        position: relative;
    }

    .loading-3 i {
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: main-color;
        margin-right: 10px;
        position: absolute;
    }

    .loading-3 i:nth-child(1) {
        -webkit-animation: loading-3 2s linear 0s infinite;
    }

    .loading-3 i:nth-child(2) {
        -webkit-animation: loading-3 2s linear -0.4s infinite;
    }

    .loading-3 i:nth-child(3) {
        -webkit-animation: loading-3 2s linear -0.8s infinite;
    }

    .loading-3 i:nth-child(4) {
        -webkit-animation: loading-3 2s linear -1.2s infinite;
    }

    .loading-3 i:nth-child(5) {
        -webkit-animation: loading-3 2s linear -1.6s infinite;
    }
</style>
